<template>
	<view>
		<view class="swiper_view">
			<swiper class="swiper"  :autoplay="true" :circular="true" :interval="3000" :duration="1000" @change="swiper_change">
				<swiper-item v-for="(item,index) in detail.img">
					<image :src="ImgUrl + item" mode="" class="swiper_img"></image>
				</swiper-item>
			</swiper>
			<view class="swiper_currentNum">
				{{currentNum}}/{{detail.img.length}}
			</view>
		</view>
		<view class="content">
			<view class="list_item_price">
				{{detail.score}}
				<text class="fs-28">积分</text>
				<text style="margin: 0 10rpx;">+</text>
				{{ detail.price | pointsPrice }}
				<text class="fs-28">.{{ jiage | pointsPrice(1) }}</text>
				<text class="fs-28">元</text>
			</view>
			<view class="list_item_right_title line-2">
				{{detail.name}}
			</view>
			<view class="yf_view flex">
				<view class="yf">
					运费10元
				</view>
				<view class="yf">
					销量102
				</view>
				<view class="yf">
					库存893
				</view>
			</view>
			<!-- <view class="shuoming flex">
				<view class="shuoming_left flex1">
					<view class="shuoming_left_left">
						主治功能
					</view>
					<view class="shuoming_left_right">
						普通感冒；流行性感冒
					</view>
				</view>
				<view class="shuoming_left flex1">
					<view class="shuoming_left_left">
						用法用量
					</view>
					<view class="shuoming_left_right">
						口服，成人，一次1片，一日2次
					</view>
				</view>
				<u-icon name="arrow-right" color="#000000" size="13"></u-icon>
			</view> -->
			<view class="kuaidi">
				<view class="kuaidi_item flex">
					<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/wuliu.png" class="kuaidi_item_left" mode=""></image>
					<view class="kuaidi_item_min">
						<view class="kuaidi_item_min_top">
							送至
						</view>
						<view class="kuaidi_item_min_bottom">
							北京市 朝阳区 建外solo天街大厦a座2505
						</view>
					</view>
					<u-icon name="arrow-right" color="#000000" size="13"></u-icon>
				</view>
				<view class="kuaidi_item flex">
					<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/wuliu.png" class="kuaidi_item_left" mode=""></image>
					<view class="kuaidi_item_min1">
						正品保证 隐私发货 不支持七天无理由退货 非处方药
					</view>
				</view>
			</view>
			<view class="pingjia">
				<view class="pingjia_top flex">
					<view class="pingjia_left flex1">
						<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/pingjia.png" class="pingjia_left_img" mode=""></image>
						<view class="pingjia_left_text">
							评价
						</view>
					</view>
					<view class="pingjia_right flex1" @click="go_pingjia">
						<view class="pingjia_right_text">
							好评度99%
						</view>
						<u-icon name="arrow-right" color="#000000" size="11"></u-icon>
					</view>
				</view>
				<view class="pingjia_label flex1">
					<view class="pingjia_label_item">
						发货快
					</view>
					<view class="pingjia_label_item">
						品质放心
					</view>
					<view class="pingjia_label_item">
						性价比高
					</view>
					<view class="pingjia_label_item">
						包装很好
					</view>
				</view>
				<view class="user_pl" v-for="(item,index) in detail.comment">
					<view class="user_pl_user">
						<image class="user_pl_user_img" :src="ImgUrl + item.user.avatar" mode=""></image>
						<view class="user_pl_pl">
							<view class="user_pl_name">{{item.user.name}}</view>
							<u-rate size="10" inactiveColor="#626262" :readonly="true" gutter="2" activeColor="#DD504A" :count="count" v-model="item.star"></u-rate>
						</view>
					</view>
					<view class="pl_text">
						{{item.content}}
					</view>
					<view class="pingjia_img flex1">
						<image :src="ImgUrl + item"  class="pingjia_img_item" mode="" v-for="(item,index) in item.img"></image>
					</view>
				</view>
			</view>
			<view class="xiangqing">
				<view class="xiangqing_top flex1">
					<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/xiangqing.png" class="xiangqing_top_img" mode=""></image>
					<view class="xiangqing_top_text">
						{{detail.detail}}
					</view>
				</view>
			</view>
		</view>
		<view class="bottom flex">
			<view class="bottom_btn">
				立即购买
			</view>
		</view>
		
	</view>
</template>

<script>
	import { score_goods_detail } from '../../../api/common.js';
	import {
		pointsPrice
	} from '@/utils/util1.js'
	export default {
		data() {
			return {
				detail:{},
				id:'',
				list:[],
				count:5,
				jiage:'12.80',
				currentNum:1,
				star:4,
				show:false,
				guige:[
					{
						title:'规格1',
						list:[
							{
								lable:'1盒',
								active:false
							},
							{
								lable:'1盒',
								active:false
							},
							{
								lable:'1盒',
								active:false
							}
						]
					},
					{
						title:'规格2',
						list:[
							{
								lable:'5盒组合装',
								active:false
							},
							{
								lable:'15盒组合装',
								active:false
							}
						]
					}
				],
				value:'',
			}
		},
		filters: {
			pointsPrice
		},
		computed:{
			ImgUrl(){
				console.log(this.$store.state.ImgUrl)
				return this.$store.state.ImgUrl
			},
		},
		onLoad(option) {
			if(option){
				this.id = option.id;
				this.getDetail(option.id)
			}
		},
		methods: {
			getDetail(id){
				score_goods_detail({id:id}).then(res=>{
					if(res.code == 200001){
						this.detail = res.data;
					}
				})
			},
			swiper_change(e){
				this.currentNum = e.detail.current+1
			},
			close(){
				this.show = false
			},
			open(){
				this.show = true
			},
			determine(num){
				this.show = true
				if(num == 1)console.log('加购物车')
				if(num == 2)console.log('购物')
			},
			choose_lable(index,indexs){
				let data = this.guige[index].list
				for(let i in data){
					data[i].active = false
				}
				this.$set(this.guige[index].list[indexs],'active',true)
			},
			valChange(e){
				console.log(e)
			},
			go_ConfirmOrder(){
				uni.navigateTo({
					url:'/pages/ConfirmOrder/ConfirmOrder'
				})
			},
			go_pingjia(){
				uni.navigateTo({
					url:'/pages/AllComments/AllComments'
				})
			}
		}
	}
</script>

<style>
	page{
		background: #fff;
		padding-bottom: 200rpx;
	}
	.swiper_view{
		width:100%;
		height: 628rpx;
		position: relative;
	}
	.swiper{
		width: 100%;
		height: 628rpx;
	}
	.swiper_img{
		width: 100%;
		height: 628rpx;
	}
	.swiper_currentNum{
		display: inline-flex;
		padding: 6rpx 20rpx;
		border-radius: 114rpx;
		background: rgba(0, 0, 0, 0.40);
		color: #FFF;
		text-align: center;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 24rpx;
		font-weight: 400;
		position: absolute;
		bottom: 30rpx;
		right: 30rpx;
	}
	.price_view{
		color: #E5432E;
		font-family: Alibaba PuHuiTi 2.0;
		font-weight: 700;
		margin-top: 30rpx;
	}
	.fs-52{
		font-size: 52rpx;
	}
	.fs-32{
		font-size: 32rpx;
	}
	.content{
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.list_item_right_title{
		height: 80rpx;
		color: #333;
		text-overflow: ellipsis;
		font-family: Alibaba PuHuiTi 2.0;
		font-size:32rpx;
		font-weight: 400;
		margin-top: 20rpx;
	}
	.list_item_right_title_bq{
		display: inline-flex;
		padding: 2rpx 8rpx;
		border-radius: 8rpx 8rpx 0rpx 8rpx;
		background: linear-gradient(239deg, #FCF1CF 31.36%, #FAE6A5 68.64%);
		color: #5F360F;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 22rpx;
		font-weight: 400;
		margin-right: 5rpx;
	}
	.yf_view{
		margin-top: 16rpx;
	}
	.yf{
		color: #999;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 24rpx;
		font-weight: 400;
	}
	.shuoming{
		width: 100%;
		/* height: 108rpx; */
		border-radius: 16rpx;
		background: linear-gradient(270deg, #DDEBFF 0%, #EBF3FF 100%);
		padding:20rpx 30rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
	}
	.shuoming_left{
		width: 45%;
	}
	.shuoming_left_left{
		width: 60rpx;
		min-width: 60rpx;
		color: #9CABBE;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 24rpx;
		font-weight: 400;
	}
	.shuoming_left_right{
		color: #666;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 24rpx;
		font-weight: 400;
		margin-left: 10rpx;
	}
	.kuaidi{
		width: 100%;
		height: 216rpx;
		border-radius: 16rpx;
		background: #F8F8F8;
		margin-top: 20rpx;
	}
	.kuaidi_item:last-child{
		border: 0;
	}
	.kuaidi_item{
		width: 100%;
		height: 108rpx;
		border-bottom: 1rpx solid #EEE;
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.kuaidi_item_left{
		min-width: 48rpx;
		width: 48rpx;
		height: 48rpx;
	}
	.kuaidi_item_min{
		width: 81%;
	}
	.kuaidi_item_min_top{
		color: #333;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 24rpx;
		font-weight: 400;
	}
	.kuaidi_item_min_bottom{
		color: #999;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 24rpx;
		font-weight: 400;
	}
	.kuaidi_item_min1{
		width: 89%;
		color: #333;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 24rpx;
		font-weight: 400;
	}
	.pingjia{
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		border-radius: 16rpx;
		background: #F8F8F8;
		margin-top: 20rpx;
	}
	.pingjia_left_img{
		width: 48rpx;
		height: 48rpx;
	}
	.pingjia_left_text{
		color: #333;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 24rpx;
		font-weight: 400;
		height: 48rpx;
		line-height: 48rpx;
		margin-left: 20rpx;
	}
	.pingjia_right_text{
		color: #999;
		text-align: right;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 24rpx;
		font-weight: 400;
		margin-right: 8rpx;
	}
	.pingjia_label{
		margin-top: 20rpx;
	}
	.pingjia_label_item{
		color: #666;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 20rpx;
		font-weight: 400;
		display: inline-block;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		margin-right: 30rpx;
		background: #EDEDED;
		border-radius: 64rpx;
	}
	.user_pl {
		margin-top: 30rpx;
	}
	.user_pl_user {
		display: flex;
		align-items: center;
	}
	.user_pl_user_img {
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		background-color: #333;
	}
	.user_pl_name {
		color: var(--unnamed, #626262);
		font-family: Alibaba PuHuiTi 2;
		font-size: 22rpx;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}
	.user_pl_pl {
		margin-left: 20rpx;
	}
	.pl_text {
		margin-top: 24rpx;
		color: #333;
		font-family: Alibaba PuHuiTi 2;
		font-size: 24rpx;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}
	.pingjia_img{
		margin-top: 20rpx;
	}
	.pingjia_img_item{
		width: 128rpx;
		height: 128rpx;
		border-radius: 8rpx;
		background:#ccc;
		margin-right: 8rpx;
	}
	.xiangqing{
		width: 100%;
		border-radius: 16rpx;
		background: #F8F8F8;
		padding: 30rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
	}
	.xiangqing_top_img{
		width: 48rpx;
		height: 48rpx;
	}
	.xiangqing_top_text{
		height: 48rpx;
		line-height: 48rpx;
		color: #333;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 24rpx;
		font-weight: 400;
		margin-left: 20rpx;
	}
	.guige{
		width: 100%;
		height: 1128rpx;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		padding:30rpx;
		box-sizing: border-box;
		position: relative;
	}
	.guige_icon{
		position: absolute;
		top: 30rpx;
		right: 30rpx;
	}
	.bottom{
		width: 100%;
		height: 140rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.bottom_btn{
		width: 690rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		border-radius: 45rpx;
		background: #0165FB;
		color: #FFF;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 30rpx;
		font-style: normal;
		font-weight: 400;
	}
	.bottom_right_left_btn{
		display: inline-flex;
		padding: 18rpx 40rpx;
		border-radius: 68rpx;
		background: rgba(1, 101, 251, 0.10);
		color: #0165FB;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 30rpx;
		font-weight: 400;
		margin-right: 30rpx;
	}
	.bottom_left_item{
		width: 80rpx;
		height: 80rpx;
		margin-right: 30rpx;
	}
	.bottom_left_item_img{
		width: 48rpx;
		height: 48rpx;
		display: block;
		margin: 0 auto;
	}
	.bottom_left_item_text{
		color: #333;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 20rpx;
		font-weight: 400;
		text-align: center;
	}
	.guige_shopinfo{
		display: flex;
		align-items: center;
	}
	.guige_shopinfo_img{
		width: 160rpx;
		height: 160rpx;
		border-radius: 8rpx;
		background: #D9D9D9;
	}
	.guige_shopinfo_right{
		padding-top: 64rpx;
		margin-left: 20rpx;
	}
	.guige_shopinfo_right_bottom{
		color: #999;
		/* margin-top: 10rpx; */
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 24rpx;
		font-weight: 400;
	}
	.guige_list_item_title{
		color: #333;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 28rpx;
		font-weight: 700;
		margin-top: 40rpx;
	}
	.guige_list_item_list{
		margin-top: 30rpx;
	}
	.guige_list_item_list_item{
		display: inline-flex;
		padding: 6rpx 24rpx;
		border-radius: 78rpx;
		background: #EDEDED;
		color: #666;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 28rpx;
		font-weight: 400;
		margin-right: 30rpx;
	}
	.guige_list_item_list_item_active{
		display: inline-flex;
		padding: 6rpx 24rpx;
		border-radius: 78rpx;
		background: #0165FB;
		color: #FFF;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 28rpx;
		font-weight: 400;
		margin-right: 30rpx;
	}
	.jinbuqi{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 40rpx;
	}
	.jinbuqi_left{
		color: #333;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 28rpx;
		font-weight: 700;
		
	}
	
	/deep/.u-number-box__minus{
		width: 26px !important;
		background: #fff !important;
		border: 2rpx solid #EEEEEE;
	}
	/deep/.u-number-box__input{
		width: 26px !important;
		margin: 0 !important;
		border: 2rpx solid #EEEEEE;
		border-left: 0 !important; 
		border-right: 0 !important; 
		background: #fff !important;
	}
	/deep/.u-number-box__plus{
		width: 26px !important;
		background: #fff !important;
		border: 2rpx solid #EEEEEE;
	}
	/deep/.uni-input-input{
		font-size: 22rpx !important;
		color: #333 !important;
		font-weight: 400 !important;
	}
	/deep/.u-icon__icon {
		font-size: 22rpx !important;
	}
	/deep/.u-icon__icon {
		font-size: 22rpx !important;
	}
	.guie_btn{
		width: 690rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 80rpx;
		background:#0165FB;
		position: absolute;
		left: 30rpx;
		bottom: 88rpx;
		color: #FFF;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 30rpx;
		font-weight: 400;
	}
	.list_item_price{
		color: #E5432E;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 40rpx;
		font-weight: 600;
		margin-top: 30rpx;
	}
	.fs-28{
		font-size: 28rpx;
	}
</style>
